<template>
  <div class="schoolInfo">
    <div class="search-box">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">

        <el-form-item label="批次">
          <!-- 理科 -->
          <el-select class="select-box" v-if="isScience" v-model="searchForm.type" placeholder="请选择">
            <el-option
                v-for="item in scienceOptions"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
          <!-- 文科 -->
          <el-select class="select-box" v-if="isArts" v-model="searchForm.type" placeholder="请选择">
            <el-option
                v-for="item in liberalArts"
                :key="item.value"
                :label="item.name"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="院校">
          <el-input v-model.trim="searchForm.schoolName" placeholder="请输入院校名称"></el-input>
        </el-form-item>
        <el-form-item label="专业">
          <el-input v-model="searchForm.majorName" placeholder="请输入专业名称"></el-input>
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="searchForm.city" placeholder="请输入所在地区"></el-input>
        </el-form-item>
        <el-form-item label="层级属性">
          <el-tag class="level-tag" :class="{'active': item.current}" type="warning"
                  v-for="(item, index) in schoolLevel" :key="index"
                  @click="chooseLevel(index)">{{item.levelName}}
          </el-tag>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="searchForm.score" placeholder="请输入分数"
                    @input="numInputUpHandler(searchForm.score, 'score')"></el-input>
        </el-form-item>
        <el-form-item label="位次">
          <el-input v-model="searchForm.precedence" placeholder="请输入位次"
                    @input="numInputUpHandler(searchForm.precedence, 'precedence')"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchFun">查询</el-button>
          <el-button type="default" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="school-container">
      <el-table
          :data="schoolData"
          style="width: 100%;margin-bottom: 20px;"
          align="center"
          header-align="center"
          :row-class-name="tableRowClassName"
          :row-key="getRowKeys"
          :expand-row-keys="expandsData"
          type="index"
          tooltip-effect="dark"
          @expand-change="getExpandsData"
          v-loading="firLoading"
          border
      >
        <!-- 数据为空的缺省 -->
        <div slot="empty">
          暂无数据
        </div>
        <!-- 展开专业--开始 -->
        <el-table-column v-if="searchForm.type != 8 || searchForm.type != 7" type="expand" class="majorExpand">
          <template slot-scope="scope">
            <div>
              <el-table
                  v-if="scope.row.majorList && scope.row.majorList.length > 0"
                  :data="scope.row.majorList"
                  :row-key="getRowKeys"
                  tooltip-effect="dark"
                  :row-class-name="majorClassName"
                  :show-header="showHeader"
                  style="width: 100%;">

                <el-table-column
                    width="48">
                </el-table-column>
                <el-table-column
                    prop="code"
                    width="60"
                    label="代码">
                </el-table-column>
                <el-table-column
                    prop="majorName"
                    label="专业名称"
                    width="235">
                  <template slot-scope="scope">
                    <el-popover
                        class="cursor-type"
                        v-if="scope.row.majorDesc"
                        placement="bottom-start"
                        width="750"
                        trigger="hover">
                      <div v-html="scope.row.majorDesc"></div>
                      <div slot="reference">
                        {{scope.row.majorName}}
                      </div>
                    </el-popover>
                    <div class="cursor-type" v-else>{{scope.row.majorName}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="level"
                    width="80px"
                    label="层级">
                  <template slot-scope="scope">
                    <div>
                      {{scope.row.level=='无'?'':scope.row.level}}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    min-width="520"
                    prop="schoolName"
                    align="center"
                    label="2017/2018/2019 (计划数)投档数 | 最高分[位次] | 平均分 | 最低分[位次]">
                  <template slot-scope="scope">
                    <div class="file-section">
                      <div class="file-box" v-html="scope.row.msg2015"></div>
                      <div class="file-box" v-html="scope.row.msg2016"></div>
                      <div class="file-box" v-html="scope.row.msg2017"></div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                    width="78"
                    prop="schoolName"
                    :label="(years+'').match(/.*(.{2})/)[1] + '计划'">
                  <template slot-scope="scope">
                    <div v-if="scope.row.plan2018 > 0"
                         :class="{colorMain: scope.row.planStatus2018==0, colorGreen: scope.row.planStatus2018==1}">
                      {{scope.row.planStatus2018==1?'↑':(scope.row.planStatus2018==2?'':'↓')}}{{scope.row.plan2018}}
                    </div>
                    <div v-if="scope.row.plan2018 == 0">{{scope.row.plan2018}}</div>
                  </template>
                </el-table-column>
                <el-table-column
                    width="88"
                    label="操作">
                  <template slot-scope="scope">
                    <div class="collect" v-if="scope.row.isCollect === 0"
                         @click="collectMajorFun('add', scope.row, scope.$index)">收藏
                    </div>
                    <div class="collect" v-else @click="collectMajorFun('cancel', scope.row, scope.$index)">取消收藏</div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <!-- 展开专业--结束 -->

        <el-table-column
            prop="code"
            width="60"
            label="代码">
        </el-table-column>
        <el-table-column
            prop="schoolName"
            label="院校名称"
            width="180">
          <template slot-scope="scope">
            <el-popover
                v-if="scope.row.describe"
                class="cursor-type"
                placement="bottom-start"
                width="750"
                trigger="hover">
              <div v-html="scope.row.describe">
              </div>
              <div slot="reference">
                {{scope.row.schoolName}}
              </div>
            </el-popover>
            <div class="cursor-type" v-else>{{scope.row.schoolName}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="sortNum"
            width="55"
            label="排名">
        </el-table-column>
        <el-table-column
            align="center"
            min-width="480"
            label="2017/2018/2019|计划数/投档数|最低分(线差)|最低位次">
          <template slot-scope="scope">
            <div class="file-section">
              <div class="file-box" v-html="scope.row.msg2015"></div>
              <div class="file-box" v-html="scope.row.msg2016"></div>
              <div class="file-box" v-html="scope.row.msg2017"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
            prop="manager"
            label="主管单位">
          <template slot-scope="scope">
            <div>{{scope.row.manager.length>4?scope.row.manager.substr(0, 4):scope.row.manager}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="city"
            label="所在地区">
          <template slot-scope="scope">
            <div>{{scope.row.city.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="level"
            label="层级属性">
          <template slot-scope="scope">
            <div>{{scope.row.level.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
            prop="majorPlan"
            label="专业安排">
          <template slot-scope="scope">
            <div>{{scope.row.majorPlan}}</div>
          </template>
        </el-table-column>
        <el-table-column
            width="80"
            prop="majorPlan"
            :label="(years+'').match(/.*(.{2})/)[1] + '计划'">
          <template slot-scope="scope">
            <div v-if="scope.row.plan2018 > 0"
                 :class="{colorMain: scope.row.planStatus2018==0, colorGreen: scope.row.planStatus2018==1}">
              {{scope.row.planStatus2018==1?'↑':(scope.row.planStatus2018==2?'':'↓')}}{{scope.row.plan2018}}
            </div>
            <div v-if="scope.row.plan2018 == 0">{{scope.row.plan2018}}</div>
          </template>
        </el-table-column>
        <el-table-column
            width="88"
            label="操作">
          <template slot-scope="scope">
            <div class="collect" v-if="scope.row.isCollect === 0" @click="collectSchoolFun('add', scope.row)">收藏</div>
            <div class="collect" v-else @click="collectSchoolFun('cancel', scope.row)">取消收藏</div>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-box" v-if="schoolData && schoolData.length > 0">
        <!--        <el-pagination-->
        <!--            layout="prev, pager, next"-->
        <!--            @current-change="handleCurrentChange"-->
        <!--            :current-page="searchForm.page"-->
        <!--            :page-size="15"-->
        <!--            :page-count=""-->
        <!--            :total="allTotal">-->
        <!--        </el-pagination>-->
        <el-pagination
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-count="pageTotal">
        </el-pagination>
      </div>

    </div>


  </div>
</template>

<script>
  import API from '@assets/js/api.js'

  export default {
    name: "school-info",
    data() {
      return {
        searchForm: {
          type: "", // 类型1:理科一本以此类推
          page: 1,
          schoolLevel: "", // 院校层级
          city: "", // 所在地区
          schoolName: "", // 专业名称
          majorName: "", // 专业名称
          score: "", // 分数
          precedence: "", // 位次
        },
        // 请求学校类型1、理工类一本2、文史类一本3、理工类二本4、文史类二本5、理工类三本6、文史类三本
        scienceOptions: [
          {
            name: '理工类一本',
            value: 1
          },
          {
            name: '理工类二本',
            value: 3
          },
          {
            name: '理工类高职专科',
            value: 7
          },
        ],
        liberalArts: [
          {
            name: '文史类一本',
            value: 2
          },
          {
            name: '文史类二本',
            value: 4
          },
          {
            name: '文史类高职专科',
            value: 8
          },
        ],
        isArts: false,
        isScience: false,
        schoolLevel: [
          {
            levelName: '双一流',
            current: false
          },
          {
            levelName: '985',
            current: false
          },
          {
            levelName: '211',
            current: false
          },
          {
            levelName: '小211',
            current: false
          },
          {
            levelName: '省重点',
            current: false
          },
          // {
          //   levelName: '合办',
          //   current: false
          // }
        ],
        years: 0,
        userInfo: {},
        schoolData: [],
        expandsData: [],
        majorData: [],
        allTotal: 0,
        pageTotal: 0,
        firLoading: false,
        showHeader: true,
        currentExpandCode: "",
      }
    },
    created() {
      // 获取当前时间
      this.years = new Date().getFullYear();
      if (sessionStorage.getItem('userInfo')) {
        this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
        this.typeUtil()
      } else {
        this.$message.error('登录失效，请重新登录');
        setTimeout(() => {
          this.$router.replace({path: '/login'})
        }, 1500)
      }
      this.getSchoolInfo();
    },
    methods: {
      typeUtil() {
        if (this.userInfo.type == 1) {
          this.isScience = true;
          this.searchForm.type = this.scienceOptions[0].value;
        } else {
          this.isArts = true;
          this.searchForm.type = this.liberalArts[0].value;
        }
      },
      chooseLevel(index) {
        this.schoolLevel.forEach(e => {
          e.current = false;
        });
        this.schoolLevel[index].current = true;
        this.searchForm.schoolLevel = this.schoolLevel[index].levelName;
      },
      searchFun() {
        this.searchForm.page = 1;
        delete this.searchForm.page
        this.getSchoolInfo();
      },
      resetSearch() {
        this.schoolLevel.forEach(e => {
          e.current = false;
        });
        this.searchForm.page = 1;
        this.searchForm.schoolLevel = ""; // 院校层级
        this.searchForm.city = ""; // 所在地区
        this.searchForm.schoolName = ""; // 专业名称
        this.searchForm.majorName = ""; // 专业名称
        this.searchForm.score = ""; // 分数
        this.searchForm.precedence = ""; // 位次

        // this.typeUtil();
        this.getSchoolInfo();
      },
      getSchoolInfo() {
        this.axios.post(API.querySchool, this.searchForm).then(res => {
          if (res.data.code === 1) {
            this.schoolData = res.data.list;
            this.allTotal = res.data.total;
            this.pageTotal = res.data.pageTotal;
            this.searchForm.page = res.data.page
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          this.$message.error(err);
        })

      },

      getRowKeys(row) {
        return row.code;
      },
      getExpandsData(row, expandedRows) {
        this.currentExpandCode = row.code
      },
      // 判断是否展示子集箭头
      tableRowClassName(row) {
        let res = '';
        if (row.row.color === 1) {
          res += 'bgGray '
        }
        console.log("==bg==" + row.row.isSearch)
        if (row.row.isSearch == 1) {
          res += 'bgYellow ';
        }
        if (row.row.majorList.length == 0) {
          res += 'row-expand-cover';
        }
        return res;
      },
      // 专业展示
      majorClassName(row) {
        let res = 'bgMajor';
        if (!row.row.majorList) {
          res += ' row-expand-cover';
        }
        if (row.row.isSearch === 1) {
          res += ' bgYellow';
        }
        return res;
      },

      numInputUpHandler(value, key) {
        if (value.length == 1) {
          value = value.replace(/[^1-9]/g, '');
        } else {
          value = value.replace(/\D/g, '');
        }
        this.searchForm[key] = value;
      },

      handleCurrentChange(val) {
        this.searchForm.page = val;
        this.getSchoolInfo();
      },

      collectSchoolFun(type, row) {
        let params = {
          type: this.searchForm.type,
          schoolCode: row.code,
          majorCode: "",
        };
        if (type === "add") {
          this.collectUtil(params);
        } else {
          this.cancelUtil(params);
        }

      },

      collectMajorFun(type, row) {
        let params = {
          type: this.searchForm.type,
          schoolCode: row.schoolCode,
          majorCode: row.code,
        };
        if (type === "add") {
          this.collectUtil(params);
        } else {
          this.cancelUtil(params);
        }

      },

      // 收藏工具方法
      collectUtil(params) {
        this.axios.post(API.addCollect, params).then(res => {
          if (res.data.code === 1) {
            this.$message.success("收藏成功！");
            this.getSchoolInfo();
          } else {
            this.$message.error(res.data.msg);
          }
        }).catch(err => {
          this.$message.error(err.msg);
        })
      },
      // 收藏工具方法
      cancelUtil(params) {
        this.axios.get(API.cancelCollect + '?type=' + params.type + '&schoolCode=' + params.schoolCode +
          '&majorCode=' + params.majorCode).then(res => {
          if (res.data.code === 1) {
            this.$message.success("取消收藏！");
            this.getSchoolInfo();
          } else {
            this.$message.error("取消收藏失败！");
          }
        }).catch(err => {
          this.$message.error(err);
        })
      },
    },
  }
</script>

<style lang="stylus">
  .schoolInfo
    .el-table--scrollable-x .el-table__body-wrapper
      overflow-x: hidden;

    .el-table__expanded-cell[class*=cell]
      padding: 0 !important;

    .el-table--enable-row-hover .el-table__body tr:hover > td
      background-color: rgba(255, 255, 255, 0) !important;

    .row-expand-cover .el-table__expand-column .el-table__expand-icon
      display: none;

    .bgGray
      background-color: #dedede;

    .bgMajor
      background #f7d0d2 !important

    .bgYellow
      background-color #faecd8 !important

</style>
<style scoped lang="stylus">
  $theme-color = #E65A1E
  $theme-txt = #ED8B61

  .schoolInfo
    width 100%

    .search-box
      width 100%
      padding 15px 0

      .select-box
        width 180px

      .level-tag
        margin-right 6px
        cursor pointer

        &.active
          background-color: $theme-txt;
          border-color: $theme-txt;
          color: #fff;

    .school-container
      padding-top 20px

      .handle-box
        width 88px

    .page-box
      padding 20px 0
      text-align right

    .file-section
      display flex
      flex-wrap nowrap

      .file-box
        position relative
        flex 1
        padding 0 5px
        text-align right

      .file-box:before
        position absolute
        content: ' '
        top 0
        right 0
        z-index 2
        margin-top -12px
        width 1px
        height 50px
        background #EBEEF5

      .file-box:last-child:before
        background rgba(255, 255, 255, 0)

    .collect
      cursor pointer
      color: $theme-color !important;

    .bgGray
      background-color: #dedede;

    .bgMajor
      background #f7d0d2 !important

    .colorMain
      color: $theme-color !important;

    .colorGreen
      color: #3CB371 !important;

    .colorYellow
      color #E6A23C !important

    .bgYellow
      background-color #faecd8 !important

    .cursor-type
      cursor pointer

</style>